<template>
  <div style="position: relative;" >
    <div  @mouseover="mouseIn()" @mouseout="mouseOut()" @mousemove="mousemove">
      <slot name="orin"></slot>
    </div>
    <div :class="'mtip '+getTipLocationCss()" v-if="tip && !disabled" >
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        tip: false,
        mouse: {
          x: 0, y:0
        }
      }
    },
    props:{
      disabled:{
        default: function(){return false},
        type:Boolean
      }
    },
    methods:{
      mouseIn(){
        if(this.tip)
          return;
        this.tip=true;
      },
      mouseOut(){
        if(!this.tip)
          return;
        this.tip=false;
      },
      mousemove(e){
        e = e|| window.event;
        if(e.pageX || e.pageY){
          this.mouse.x = e.pageX;
          this.mouse.y = e.pageY;
        }
        //console.log(JSON.stringify(this.mouse));
      },
      getTipLocationCss(){
        let w=window.innerWidth-200;
        let h = window.innerHeight - 200;
        let c1 = ''
        let c2 = ''
        if(this.mouse.x>w){
          c1 = 'tip_left'
        }else{
          c1 = 'tip_right'
        }
        if(this.mouse.y>h){
          c2 = 'tip_top'
        }else{
          c2 = 'tip_bottom'
        }
        return c1 + ' ' + c2
      }
    }
  }
</script>
<style scoped>
  .mtip {
    position: absolute;
    font-size: 13px;
    padding: 10px;
    border: lightgray solid 1px;
    overflow: hidden;
    border-radius: 3px;
    background-color: white;
    min-width: 200px;
    max-height: 140px;
    overflow: hidden;
    top: 50px;
    z-index: 1;
    color:#606266;
  }

  .tip_left{
    left:-180px;
  }

  .tip_right{
    left:0;
  }

  .tip_top{
    top:-150px;
  }

  .tip_bottom{
    /*top: 0;*/
  }

</style>
